<template>
  <div class="page flex-col justify-between">
    <div class="image-wrapper_1 flex-col">
      <img class="image_1" referrerpolicy="no-referrer" src="./assets/img/5a67b95e305fb492ded0ef5132b45b47.png" />
    </div>
    <img class="image_2" referrerpolicy="no-referrer" src="./assets/img/7ad9950a652cc937c31385711bf900e5.png" />
    <img class="image_3" referrerpolicy="no-referrer" src="./assets/img/524229bbffc2bf1e18c02e0f9080529a.png" />
    <div class="section_1 flex-col">
      <div class="group_1 flex-col">
        <div class="image-wrapper_2 flex-col">
          <img class="image_4" referrerpolicy="no-referrer" src="./assets/img/9718945a641023e8e6f57ccd552101a2.png" />
          <img class="image_5" referrerpolicy="no-referrer" src="./assets/img/f116bc2855611b3cb5ec4a14ef0d9129.png" />
        </div>
        <span class="text_1">实时监控大屏管理系统</span>
      </div>
      <img class="image_6" referrerpolicy="no-referrer" src="./assets/img/f6c6d56c6df185e54d486ef9ca8c1270.png" />
      <div class="image-wrapper_3 flex-col">
        <img class="thumbnail_1" referrerpolicy="no-referrer" src="./assets/img/6b01b2e28ed066414e2c24d79adfb864.png" />
      </div>
      <div class="image-wrapper_4 flex-col">
        <img class="thumbnail_2" referrerpolicy="no-referrer" src="./assets/img/8c2c836ec9713220b7804fa0c36e2643.png" />
      </div>
    </div>
    <div class="section_2 flex-col">
      <div class="group_2 flex-row">
        <div class="box_1 flex-row">
          <span class="text_2">产量完成率（周）</span>
          <div class="group_3 flex-col"></div>
          <div class="group_4 flex-col"></div>
        </div>
        <div class="box_2 flex-col"></div>
        <div class="box_3 flex-col"></div>
        <div class="box_4 flex-col"></div>
        <div class="box_5 flex-row">
          <span class="text_3">各工站良品率(周)</span>
          <div class="section_3 flex-col"></div>
          <div class="section_4 flex-col"></div>
        </div>
        <div class="box_6 flex-col"></div>
        <div class="box_7 flex-col"></div>
        <div class="box_8 flex-col"></div>
        <div class="text-wrapper_1 flex-col"><span class="text_4">设备运行率(周)</span></div>
      </div>
      <div class="group_5 flex-row">
        <img class="image_7" referrerpolicy="no-referrer" src="./assets/img/73888a4b0fd688e624c7f701c677d5da.png" />
        <div class="block_1 flex-col">
          <div class="group_6 flex-row justify-between">
            <div class="text-wrapper_2 flex-col">
              <span class="text_5">80%</span>
              <span class="text_6">合格率</span>
              <span class="text_7">20%</span>
              <span class="text_8">不合格率</span>
            </div>
            <div class="text-wrapper_2 flex-col">
              <span class="text_5">100%</span>
              <span class="text_6">合格率</span>
              <span class="text_7">0%</span>
              <span class="text_8">不合格率</span>
            </div>
            <div class="text-wrapper_2 flex-col">
              <span class="text_5">95%</span>
              <span class="text_6">合格率</span>
              <span class="text_7">5%</span>
              <span class="text_8">不合格率</span>
            </div>
            <div class="text-wrapper_2 flex-col">
              <span class="text_5">88%</span>
              <span class="text_6">合格率</span>
              <span class="text_7">12%</span>
              <span class="text_8">不合格率</span>
            </div>

            <!-- <div class="text-wrapper_3 flex-col">
              <span class="text_9">100%</span>
              <span class="text_10">合格率</span>
              <span class="text_11">0%</span>
              <span class="text_12">不合格率</span>
            </div>
            <div class="text-wrapper_4 flex-col">
              <span class="text_13">95%</span>
              <span class="text_14">合格率</span>
              <span class="text_15">5%</span>
              <span class="text_16">不合格率</span>
            </div>
            <div class="text-wrapper_5 flex-col">
              <span class="text_17">88%</span>
              <span class="text_18">合格率</span>
              <span class="text_19">12%</span>
              <span class="text_20">不合格率</span>
            </div> -->
          </div>
          <div class="text-wrapper_6 flex-row">
            <span class="text_21">抽真空</span>
            <span class="text_22">卤素检测</span>
            <span class="text_23">性能检测</span>
            <span class="text_24">静音检测</span>
          </div>
        </div>
        <div class="block_2 flex-col">
          <div class="text-wrapper_7 flex-row">
            <span class="text_25">工站</span>
            <span class="text_26">运行时长</span>
            <span class="text_27">运行率</span>
          </div>
          <div class="text-wrapper_8 flex-row justify-between">
            <span class="text_28">抽真空</span>
            <span class="text_29">64h</span>
          </div>
          <div class="text-wrapper_9 flex-row">
            <span class="text_30">冷媒冲注</span>
            <span class="text_31">62h</span>
            <span class="text_32">98%</span>
          </div>
          <div class="section_5 flex-col"></div>
          <div class="text-wrapper_10 flex-row">
            <span class="text_33">卤素检测</span>
            <span class="text_34">57h</span>
            <span class="text_35">90%</span>
          </div>
          <div class="section_6 flex-col"></div>
          <div class="text-wrapper_11 flex-row">
            <span class="text_36">性能检测</span>
            <span class="text_37">64h</span>
            <span class="text_38">100%</span>
          </div>
          <div class="section_7 flex-col"></div>
          <div class="text-wrapper_12 flex-row">
            <span class="text_39">静音检测</span>
            <span class="text_40">64h</span>
            <span class="text_41">100%</span>
          </div>
          <div class="section_8 flex-col"></div>
          <div class="section_9 flex-col">
            <span class="text_42">100%</span>
            <div class="group_7 flex-col"></div>
          </div>
        </div>
      </div>
      <div class="group_8 flex-row">
        <div class="box_9 flex-row">
          <span class="text_43">周完成率按日走势图</span>
          <div class="block_3 flex-col"></div>
          <div class="block_4 flex-col"></div>
        </div>
        <div class="box_10 flex-col"></div>
        <div class="box_11 flex-col"></div>
        <div class="box_12 flex-col"></div>
        <div class="box_13 flex-row">
          <span class="text_44">良品率走势图</span>
          <div class="block_5 flex-col"></div>
          <div class="block_6 flex-col"></div>
        </div>
        <div class="box_14 flex-col"></div>
        <div class="box_15 flex-col"></div>
        <div class="box_16 flex-col"></div>
        <div class="box_17 flex-row">
          <span class="text_45">运行率走势图</span>
          <div class="block_7 flex-col"></div>
          <div class="block_8 flex-col"></div>
        </div>
        <div class="box_18 flex-col"></div>
        <div class="box_19 flex-col"></div>
        <div class="box_20 flex-col"></div>
      </div>
      <div class="image-wrapper_5 flex-row">
        <img class="image_8" referrerpolicy="no-referrer" src="./assets/img/ff5d708a1b98b660ab2ed8f2caa6f674.png" />
      </div>
      <div class="image-wrapper_6 flex-row justify-between">
        <img class="image_9" referrerpolicy="no-referrer" src="./assets/img/920ccf5df50e5c06893102134fcaa126.png" />
        <img class="image_10" referrerpolicy="no-referrer" src="./assets/img/b3cbed4a9319ff99fa3d6c2cccb65030.png" />
        <img class="image_11" referrerpolicy="no-referrer" src="./assets/img/c008ea57ad7bb45b91072e9aa96ab487.png" />
      </div>
      <div class="group_9 flex-row">
        <div class="box_21 flex-row">
          <span class="text_46">当日生产数据</span>
          <div class="group_10 flex-col"></div>
          <div class="group_11 flex-col"></div>
        </div>
        <div class="box_22 flex-col"></div>
        <div class="box_23 flex-col"></div>
        <div class="box_24 flex-col"></div>
        <div class="box_25 flex-row">
          <span class="text_47">型号-产量占比</span>
          <div class="group_12 flex-col"></div>
          <div class="group_13 flex-col"></div>
          <div class="group_14 flex-col"></div>
          <div class="group_15 flex-col"></div>
          <div class="group_16 flex-col"></div>
          <div class="group_17 flex-row">
            <span class="text_48">型号-周产量完成率</span>
            <div class="box_26 flex-col"></div>
            <div class="box_27 flex-col"></div>
            <div class="box_28 flex-col"></div>
            <div class="box_29 flex-col"></div>
            <div class="box_30 flex-col"></div>
            <div class="box_31 flex-row">
              <span class="text_49">工站达成率</span>
              <div class="box_32 flex-col"></div>
              <div class="box_33 flex-col"></div>
            </div>
          </div>
        </div>
        <div class="box_34 flex-col"></div>
        <div class="box_35 flex-col"></div>
        <div class="box_36 flex-col"></div>
      </div>
      <div class="group_18 flex-row">
        <img class="image_12" referrerpolicy="no-referrer" src="./assets/img/ffcc68735db4a889f6f3e299a51e377a.png" />
        <img class="image_13" referrerpolicy="no-referrer" src="./assets/img/91f5c3cf786ef0c6074497822ffb9f98.png" />
        <div class="section_10 flex-col">
          <span class="text_50">Ehy</span>
          <div class="group_19 flex-col">
            <div class="group_20 flex-row">
              <span class="text_51">90%</span>
              <div class="box_37 flex-col"></div>
            </div>
          </div>
          <span class="text_52">c71</span>
          <div class="group_21 flex-col">
            <div class="section_11 flex-row justify-end">
              <span class="text_53">68%</span>
              <img class="label_1" referrerpolicy="no-referrer"
                src="./assets/img/a5d292897715045d6ebe29f5877bd2e7.png" />
            </div>
          </div>
        </div>
        <img class="image_14" referrerpolicy="no-referrer" src="./assets/img/4b2274668b5770fbae034dd6b3ea504c.png" />
      </div>
      <div class="group_22 flex-col">
        <div class="block_9 flex-col"></div>
      </div>
      <div class="group_23 flex-col">
        <!-- <div class="group_24 flex-row">
          <span class="text_54">真空泵二次调机</span>
          <div class="image-text_1 flex-row justify-between">
            <span class="text-group_1">已解决</span>
            <img class="label_2" referrerpolicy="no-referrer" src="./assets/img/57d83e2a0dbec507207e86e403945fa5.png" />
          </div>
        </div> -->

      </div>
    </div>

    <!-- 产量完成率 周 -->
    <div class="p-main">
      <proBolck :info="infoObj1" />
      <proBolck :info="infoObj2" style="margin-top: 50px;" />
      <proBolck :info="infoObj3" />
      <proBolck :info="infoObj4" style="margin-top: 50px;" />
      <proBolck :info="infoObj5" />
    </div>

    <!-- 按日走势图 -->
    <div class="day-wrapper">
      <daily-charts :xData="xAxis" :planData="[100, 100, 100, 100, 100, 100, 100]"
        :actualData="[50, 65, 70, 66, 82, 80, 90]" />
    </div>

    <!-- 良品走势 -->
    <div class="good-wrapper">
      <good-charts :xData="xAxis" :seriesData="[
        { name: '真空合格率', data: [80, 82, 78, 85, 90, 88, 92] },
        { name: '卤素合格率', data: [60, 65, 62, 68, 70, 66, 72] },
        { name: '商检合格率', data: [55, 58, 54, 60, 63, 59, 65] },
        { name: '静音合格率', data: [70, 75, 72, 78, 80, 77, 83] }
      ]" />
    </div>

    <!-- 运行率走势 -->
    <div class="run-wrapper">
      <good-charts :xData="xAxis" :seriesData="[
        { name: '抽真空', data: [30, 35, 28, 40, 45, 38, 50] },
        { name: '冷媒冲注', data: [20, 22, 18, 25, 28, 24, 30] },
        { name: '性能检测', data: [15, 18, 14, 20, 23, 19, 25] },
        { name: '静音检测', data: [10, 12, 9, 15, 18, 13, 20] }
      ]" />
    </div>

    <!-- 不良分析 -->
    <div class="bad-wrapper">
      <div class="today-list">
        <div class="today-row" v-for="(line, idx) in todayLines" :key="idx">
          <div class="today-name">{{ line.name }}</div>
          <div class="today-item"><span class="label">产量</span><span class="val">{{ line.qty }}</span></div>
          <div class="today-item"><span class="label">合格率</span><span class="val">{{ line.rate }}</span> <span v-if="line.rate">%</span> </div>
          <div class="today-item"><span class="label">合格数</span><span class="val">{{ line.qualified }}</span></div>
        </div>
      </div>
    </div>

    <!-- 产量占比 -->
    <div class="model-wrapper">
      <model-proportion :chartData="[
        { name: 'Ehy', value: 83 },
        { name: 'c71', value: 17 }
      ]" />
    </div>


    <!-- 设备运行率 -->
    <div class="tbl1">
      <div class="tb-header-line">
        <div class="tb-span">站点</div>
        <div class="tb-span">达成率</div>
      </div>
      <vue-seamless-scroll v-if="leftTableData && leftTableData.length > 0" :data="leftTableData" class="seamless-warp"
        style="width: 100%; height: 377px; overflow: hidden" :class-option="classOption">
        <div class="tb-line" v-for="(item, index) in leftTableData" :key="index">
          <div class="tb-span">{{ item.name }}</div>
          <div class="tb-span">{{ item.productionNumber }}</div>
        </div>
      </vue-seamless-scroll>
      <div style="color:#fff;text-align: center; font-size: 12px;" v-if="!leftTableData || leftTableData.length < 1">
        暂无数据 </div>
    </div>


  </div>
</template>
<script>
import proBolck from './parts/proBolck.vue'
import dailyCharts from './parts/dailyCharts.vue'
import goodCharts from './parts/goodCharts.vue'
import semiBarChart from './parts/semiBarChart.vue'
import modelProportion from './parts/modelProportion.vue'
import { getLineA,getLineB,getLineC,getLineD } from "@/api/index.js"
export default {
  components: {
    proBolck,
    dailyCharts,
    goodCharts,
    semiBarChart,
    modelProportion
  },
  data() {
    return {
      constants: {},
      infoObj1: {
        num1: '80%',
        name1: '抽真空',
        num2: '20',
        name2: '完成数'
      },
      infoObj2: {
        num1: '90%',
        name1: '冷媒冲注',
        num2: '20',
        name2: '完成数'
      },
      infoObj3: {
        num1: '85%',
        name1: '卤素检测',
        num2: '17',
        name2: '完成数'
      },
      infoObj4: {
        num1: '93%',
        name1: '性能检测',
        num2: '114',
        name2: '完成数'
      },
      infoObj5: {
        num1: '87%',
        name1: '静音检测',
        num2: '13',
        name2: '完成数'
      },
      leftTableData: [
        {
          name: '抽真空',
          productionNumber: '90%'
        },
        {
          name: '性能检测',
          productionNumber: '90%'
        },
        // {
        //   name: '卤素检测',
        //   productionNumber: 110
        // },
        // {
        //   name: '商检',
        //   productionNumber: 140
        // },
        // {
        //   name: '静音检测',
        //   productionNumber: 150
        // }
      ], // Data for the left table (tbl1)
      xAxis: [],
      todayLines: [
        { name: 'A线', qty: 150, rate: 92, qualified: 138 },
        { name: 'B线', qty: 120, rate: 90, qualified: 108 },
        { name: 'C线', qty: 100, rate: 88, qualified: 88 },
        { name: 'D线', qty: 90,  rate: 91, qualified: 82 }
      ],
      timerId: null
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快  0.5
        limitMoveNum: 9,//this.repairData.length, // 开始无缝滚动的数据量 this.tableList
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
    this.fetchTodayLines();
    this.xAxis = this.getWeekXAxis();
  },
  mounted() {
    this.timerId = setInterval(() => {
      this.fetchTodayLines();
    }, 5000);
  },
  beforeDestroy() {
    if (this.timerId) {
      clearInterval(this.timerId);
      this.timerId = null;
    }
  },
  methods: {
    fetchTodayLines() {
      const params = { date: this.getTodayStr() };
      Promise.all([
        getLineA(params),
        getLineB(params),
        // getLineC(params),
        getLineD(params)
      ])
        .then(([a, b,  d]) => {
          console.log(a,'a返回')
           console.log(d,'d返回')
          const mapToRow = (res, name) => ({
            name,
            qty: res?.data?.num ||0,
            rate: res?.data?.qualifiedRate ||0,
            qualified: res?.data?.passNum || 0
          });
          this.todayLines = [
            mapToRow(a, 'A线'),
            mapToRow(b, 'B线'),
            { name: 'C线', qty: 100, rate: 10, qualified: 10 },
            mapToRow(d, 'D线')
          ]

          this.$forceUpdate()
        })
        .catch(err => {
          console.error(err);
        });
    },
    getTodayStr() {
      const d = new Date();
      const y = d.getFullYear();
      const m = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${y}-${m}-${day}`;
    },
    getWeekXAxis() {
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      let today = new Date().getDay();
      const xAxis = [];
      for (let i = 6; i >= 0; i--) {
        xAxis.push(weekDays[(today - i + 7) % 7]);
      }
      return xAxis;
    }
  }
};
</script>
<style scoped lang="scss" src="./assets/index.scss" />
<style scoped lang="scss">
.p-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 605px;
  height: 240px;
  position: absolute;
  left: 30px;
  top: 170px;
}

.day-wrapper {
  position: absolute;
  left: 30px;
  top: 505px;
  width: 605px;
  height: 240px;
}

.good-wrapper {
  position: absolute;
  left: 655px;
  top: 505px;
  width: 610px;
  height: 245px;
}

.run-wrapper {
  position: absolute;
  right: 20px;
  top: 505px;
  width: 610px;
  height: 245px;
}


.bad-wrapper {
  position: absolute;
  left: 30px;
  bottom: 10px;
  width: 610px;
  height: 255px;
  .today-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 8px;
  }
  .today-row {
    display: flex;
    align-items: center;
    background: rgba(3, 33, 68, 0.6);
    border: 1px solid rgba(0, 168, 255, 0.25);
    height: 44px;
    padding: 0 14px;
    color: #e8f3ff;
    font-size: 18px;
    border-radius: 4px;
  }
  .today-name {
    width: 100px;
    color: #6ad3ff;
    font-weight: 700;
    font-size: 18px;
  }
  .today-item {
    display: flex;
    align-items: center;
    margin-left: 20px;
    min-width: 140px;
  }
  .today-item .label {
    color: #9ec9ff;
    margin-right: 8px;
    font-size: 16px;
  }
  .today-item .val {
    color: #ffde76;
    font-weight: 700;
    font-size: 18px;
  }
}

.model-wrapper {
  position: absolute;
  left: 655px;
  bottom: 30px;
  width: 288px;
  height: 255px;
}


.tbl1 {
  position: absolute;
  right: 50px;
  bottom: 30px;
  width: 560px;
  height: 221px;
  overflow: hidden;
  padding: 0 12px;
  // background-color: #03315e;
  padding: 10px;

}


.tb-line {
  display: flex;
  flex-direction: row;
  background-color: #0c2035;
  margin-bottom: 5px;
  justify-content: space-between;
  height: 30px;
  align-items: center;

  .tb-span {
    width: 107px;
    color: #fff;
    font-size: 18px;
    text-align: center;
  }

  .tb-span-w {
    width: 142px;
    color: #fff;
    font-size: 18px;
    text-align: center;
  }

}


.tb-header-line {
  display: flex;
  flex-direction: row;
  background-color: #022144;
  /* A slightly darker blue for the header */
  margin-bottom: 5px;
  justify-content: space-between;
  height: 40px;
  /* Slightly taller for headers */
  align-items: center;

  .tb-span,
  .tb-span-w {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }

  .tb-span {
    width: 107px;
  }

  .tb-span-w {
    width: 142px;
  }
}
</style>